import { defineComponent, ref } from 'vue';
import { SettingOutlined } from '@ant-design/icons-vue';
import drawer from './drawer';
import vdrawer from './drawer.vue';
import './index.less';

export default defineComponent({
  name: 'Setting',
  components: { SettingOutlined, vdrawer, drawer },
  props: {
    isShowOutlined: { type: Boolean, default: true },
  },
  setup(props) {
    const isShowDrawer = ref<boolean>(false);
    function openDrawer() {
      isShowDrawer.value = !isShowDrawer.value;
    }

    function renderOutlined() {
      return props.isShowOutlined ? (
        <>
          <div style="position:relatevie">
            <div onClick={openDrawer} class="prefixCls">
              <SettingOutlined />
            </div>
          </div>
        </>
      ) : null;
    }

    return () => {
      return (
        <>
          {renderOutlined()}
          <drawer visible={isShowDrawer} />
        </>
      );
    };
  },
});
